<template>
    <view class="content">
        <view class="box">
            <view class="top">
                <view class="top-img" @click="$screenshot('logo',1,1)">
                    <image :src="info.headimgurl || '/static/icon/avatar.png'" class="avatar"></image>
                    <image src="/static/icon/photo.png" class="photo"></image>
                </view>
                <view class="top-name">{{info.user_name}}</view>
            </view>
            <view class="title">个人资料</view>
            <view>
                <view class="item">
                    <view class="item-l">姓名</view>
                    <view class="u-flex-1">{{ info.user_name }}</view>
                    <!-- <input type="text" v-model="name" class="inp"> -->
                </view>
                <view class="item">
                    <view class="item-l">手机号</view>
                    <view class="u-flex-1">{{ info.phone }}</view>
                </view>
                <view class="item">
                    <view class="item-l">身份证号</view>
                    <view class="u-flex-1">{{ info.id_number }}</view>
                </view>
                <view class="item">
                    <view class="item-l">职位</view>
                    <view class="u-flex-1">{{ info.position }}</view>
                </view>
                <view class="item">
                    <view class="item-l">所在门店</view>
                    <view class="u-flex-1">{{ info.stores }}</view>
                </view>
                <view class="item">
                    <view class="item-l">所属公司</view>
                    <view class="u-flex-1">{{ info.institution }}</view>
                </view>
            </view>
        </view>
        <view class="btn" @click="doSubmit">申请离职</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                info: {},
            };
        },
        onLoad() {
			var _this =this
			uni.$on('uAvatarCropper', data => {
			    _this.$upLoadPic(data.path).then(ret => {
			        console.log(ret)
			        if (data.fromWhere == "logo"){
						if (ret.detail.image_id) {
							_this.$ajax('update_person_detail', {
							    user_token: _this.$getSync('userToken'),
								image_id: ret.detail.image_id,
							}).then(ret => {
							    if (ret.success == 1000) {
									_this.info.headimgurl = ret.detail.image
									_this.$toast('修改头像成功')
									setTimeout(() => {
										_this.getInfo()
									}, 500)
							    } else {
							        _this.$toast(ret.msg);
							    }
							});
						}
			        }
			    });
			})
			
            this.getInfo()
        },
        methods: {
            doSubmit() {
                uni.showModal({
                	title: '申请离职',
                	content: '是否确认提交离职申请？',
                	success: (res) => {
                		if (res.confirm) {
                			this.$ajax('apply_depart', {
                			    user_token: this.$getSync('userToken'),
                			}).then(ret => {
                			    if (ret.success == 1000) {
                			        this.$removeSync('userToken')
                			        this.$removeSync('userInfo')
                			        this.$removeSync('uid')
                			        this.$toast('提交成功');
                			    } else {
                			        this.$toast(ret.msg);
                			    }
                			});
                		} else if (res.cancel) {
                			console.log('用户点击取消');
                		}
                	}
                });
            },
            // 获取个人信息
            getInfo() {
                this.$ajax('person_detail', {
                    user_token: this.$getSync('userToken'),
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.info = ret.detail
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
    .box{
        background-color: #fff;
        padding: 30rpx 25rpx 0;
    }
    .top{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 25rpx;
    }
    .top-img{
        position: relative;
    }
    .avatar{
        width: 165rpx;
        height: 165rpx;
        border-radius: 50%;
        border: 2rpx solid #e6e6e6;
    }
    .photo{
        width: 44rpx;
        height: 44rpx;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .top-name{
        font-size: 34rpx;
        padding-top: 15rpx;
    }
    .title{
        font-size: 40rpx;
        padding-bottom: 20rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30rpx;
        border-bottom: 2rpx solid #e6e6e6;
        padding: 30rpx 0;
    }
    .item:last-child{
        border-bottom: none;
    }
    .item-l{
        color: #999;
        width: 150rpx;
    }
    .inp{
        flex: 1;
        // height: 105rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        margin: 50rpx 25rpx;
        background-color: #00a1e9;
        border-radius: 50rpx;
    }
    
</style>
